<template>
	<view class="userInfo">
		<view class="imageFile"><image mode="scaleToFill" src="../../../static/image/user/avatar.webp"></image></view>

		<view class="lineC"></view>
		<view class="bannerInfo">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" prop="name"><u-input v-model="form.name" :placeholder="placeholder(userInfo.name)" placeholder-style="color: #c7c7c7;" style="padding-right: 50rpx;"/></u-form-item>

				<u-form-item label="性别" prop="intro">
					<u-radio-group v-model="value" :size="24">
						<u-radio active-color="#707070" :label-size="27"  v-for="(item, index) in list" :key="index" :name="item.name">{{ item.name }}</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="生日" prop="birthday"><u-input v-model="form.birthday" :placeholder="placeholder(userInfo.birthday)" placeholder-style="color: #c7c7c7;" style="padding-right: 50rpx;"/></u-form-item>

				<view class="lineC"></view>

				<u-form-item label="手机号" prop="phoneNum">
					<u-input type="text" :placeholder="placeholder(userInfo.phone)" placeholder-style="color: #c7c7c7; text-align: right;" :disabled="true"></u-input>
					<uni-icons class="icons" color="#c7c7c7" type="arrowright"></uni-icons>
				</u-form-item>

				<u-form-item label="邮箱" prop="email">
					<u-input type="text" :placeholder="isBind(userInfo.email)" placeholder-style="color: #c7c7c7; text-align: right;" :disabled="true"></u-input>
					<uni-icons class="icons" color="#c7c7c7" type="arrowright"></uni-icons>
				</u-form-item>

				<u-form-item label="微信" prop="iswx" style="margin-bottom: 75rpx;">
					<u-input type="text" :placeholder="isBind(userInfo.wx)" placeholder-style="color: #c7c7c7; text-align: right;" :disabled="true"></u-input>
					<uni-icons class="icons" color="#c7c7c7" type="arrowright"></uni-icons>
				</u-form-item>
				<u-button @click="submit" class="uniButtom">保存</u-button>
				<u-button @click="back" class="uniButtom">取消</u-button>
			</u-form>
		</view>

		<view class="saveBtn"></view>
	</view>
</template>

<script>
export default {
	name: 'userInfo',
	data() {
		return {
			value: '', //单选框默认选中
			list: [
				//单选框列表
				{
					name: '男士',
					disabled: false
				},
				{
					name: '女士',
					disabled: false
				}
			],
			form: {
				name: '',
				intro: '',
				birthday: '',
			},
			rules: {
				//验证规则
				name: [
					{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change', 'blur']
					}
				],
				birthday: [
					{
						min: 5,
						message: '生日格式不对',
						trigger: 'blur'
					}
				],
			}
		};
	},
	onLoad(userInfo) {
		this.userInfo = JSON.parse(userInfo.userInfo);
		console.log(this.userInfo, 'userInfo');
		let userToken = uni.getStorageSync('token');
		this.value = this.userInfo.gender
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.showToast({
						title: "保存成功",
						duration: 1000
					});
				} else {
					console.log('验证失败');
				}
			});
		},
		back() {
			uni.switchTab({
				url:'../index'
			})
		},
		placeholder(value) {
			switch (value) {
				case value:
					return value
					break
				case !value: 
					return "暂无"
					break
			}
		},
		isBind (value) {
			switch (value) {
				case true : 
					return "已绑定"
					break
				case false : 
					return "未绑定"
					break
			}
		}
	}
};
</script>

<style scoped>
.userInfo {
	color: #333333;
}
.imageFile {
	margin: 50rpx 0 50rpx 310rpx;
}
.imageFile image {
	width: 140rpx;
	height: 140rpx;
	border-radius: 70rpx;
}
.lineC {
	height: 15rpx;
	width: 100%;
	background-color: #f2f2f2;
	margin-bottom: 25rpx;
}
.inputValue {
	height: 120rpx;
	line-height: 120rpx;
	border-bottom: 1rpx solid #f2f2f2;
}
.inputFlex {
	display: flex;
}
.nickName,
.gender {
	padding-left: 40rpx;
	margin-right: 120rpx;
}
.icons {
	margin-right: 30rpx;
	padding-left: 20rpx;
}
.uniButtom {
	width: 50vh;
	margin-top: 25rpx;
	background-color: #333333;
	color: #FFFFFF;
}

/deep/ .u-input__right-icon {
	/* padding-right: 100rpx; */
}
/deep/ .u-form-item--left {
	flex: 0 0 200rpx !important;
}
/deep/ .u-form-item {
	padding-left: 35rpx;
}
/deep/ ::-webkit-input-placeholder {
	/* WebKit browsers */
	direction: rtl;
}
/deep/ :-moz-placeholder {
	/* Mozilla Firefox 4 to 18 */
	direction: rtl;
}
/deep/ ::-moz-placeholder {
	/* Mozilla Firefox 19+ but I'm not sure about working */
	direction: rtl;
}
/deep/ :-ms-input-placeholder {
	/* Internet Explorer 10+ */
	direction: rtl;
}
</style>
